import BaseComponent from "../../app/baseComponent";

export class AuiMonth extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            onRenderDates: {
                required: true
            },
            dateNames: {
                type: Array,
                default: function () {
                    return ["一月", "二月", "三月", "四月", "五月",
                        "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
                }
            },
            now: {
                type: Date,
                default: new Date()
            }
        }
        this.computed = {
            range() {
                return `${this.private_year}`;
            }
        };
        this.methods = {
            render(year) {
                var self = this;    

                if (year) {
                    self.private_year = year;
                }

                if (!self.dateNames || self.dateNames.length < 1) {
                    console.error("aui-month no dateNames");
                }

                // 每一个渲染的月份
                var dates = self.dateNames.map(function (v, index) {
                    return {
                        className: "aui-month__month",
                        text: v,
                        year: self.private_year,
                        month: index,
                        origin: {}
                    }
                });              
                if (self.onRenderDates) {
                    dates = self.onRenderDates(dates);
                }
                self.private_dates = dates;           
            },
            prev() {
                var self = this;
                self.private_year = self.private_year - 1;
                self.render();
            },
            private_handleYearClick(e) {
                this.$emit("yearselect", e);
            },   
            next() {
                var self = this;
                self.private_year = self.private_year + 1;
                self.render();
            },
            private_handleMonthClick(e) {
                this.$emit("monthselect", e);
            }             
        };      
    }
    _template() {
        var self = this;
return `
<div class="${self._name}">
    <div class="${self._name}__actions" ref="actions"><button 
    class="${self._name}__action" type="button" @click="prev"><span class="${self._name}__iconprev"></span></button><div 
    class="${self._name}__action ${self._name}__range" 
        @click="private_handleYearClick" ref="year">{{range}}</div><button 
    class="${self._name}__action" type="button" @click="next"><span class="${self._name}__iconnext"></span></button></div>    
    <div class="${self._name}__months" ref="months">
        <div :class="date.className" 
        @click="private_handleMonthClick" :data-year="date.year" :data-month="date.month" v-for="date in private_dates">{{date.text}}</div>
    </div>    
</div>
`        
    }
    _mounted() {                
        var self = this;   
        self.private_year = self.now.getFullYear(); 
        self.render();    
    }    
    _data() {
        var ret = {};
        ret.private_year = 0;            
        ret.private_dates = [];
        return ret;        
    }      
}

AuiMonth.install = function() {
    window.AUICustomComponents.define("aui-month", AuiMonth);    
}
